{% extends "dashboard.html" %}

{% block title %} Bayanihan: Add Deployment {% endblock %}

{% block js %} 
	<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
{% endblock %}

{% block css %} 
	<link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/forms.css" />
    <link href="{{MEDIA_URL}}css/creation/deploy.css" rel="stylesheet" type="text/css">
{% endblock %}
               
{% block nav-deploy %} class="nav-active" {% endblock %} 
{% block content %}

    <div id="form">
        <form method="post" action="/deploy/"> {% csrf_token %}
            <div class="report_row">
                <h4>Deployment type</h4>
                <select name="deployment_type" id="deployment_type">
                    <option>select type</option>
                    <option>parent</option>
                    <option>child</option>
                </select>
            </div>
            
            <!-- parent -->
            <div id="parent_fields">
                <div class="report_row">
                    <h4>Deployment name</h4>
                    <input type="text" name="parent_deployment_name" />
                </div>
            </div>

            <!-- child -->
            <div id="child_fields">
                <div class="report_row">
                    <h4>Parent</h4>
                    <select name="deployment_parent" id="deployment_parent">
                        <option>select parent</option>
                        {% for x in deployments %}
                            <option>{{x}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="report_row">
                    <h4>Deployment name</h4>
                    <input type="text" name="child_deployment_name" />
                </div>
                <div class="report_row">
                    <h4>Color</h4>
                    <select name="child_color">
                        <option>select color</option>
                        <option value="rgb(255,0,0)">red</option>
                        <option value="rgb(0,128,0)">green</option>
                        <option value="rgb(0,0,255)">blue</option>
                        <option value="rgb(255,255,0)">yellow</option>
                        <option value="rgb(255,165,0)">orange</option>
                        <option value="rgb(128,0,128)">violet</option>
                        <option value="rgb(139,69,19)">brown</option>
                        <option value="rgb(0,0,0)">black</option>
                        <option value="rgb(255,20,147)">pink</option>
                    </select>
                </div>
                <div class="report_row">
                    <h4>Index name</h4>
                    <input type="text" name="index_name"/>
                </div>  
                <div id="index_levels">
                    <div class="report_row">
                        <h4>Level 1 name</h4>
                        <input type="text" name="level1"/>
                    </div>    
                </div>
                <div class="add_remove">
                    <a href="#" id="addLevel">add another level</a> 
                    <a href="#" id="removeLevel">remove level</a> 
                    <div style="clear:both"></div>
                </div>    
            </div>
            <input type="hidden" name="number_of_levels"></input>
            <div class="report_row">
                <input class ="btn_submit" type="submit" value="Submit"/>
            </div>
        </form> 
     </div>
    <script type="text/javascript">
        $(document).ready( function(){
            
            $("#deployment_type").change( function () { 
                var type = $("#deployment_type").val();
                if(type == 'parent'){
                    $("#child_fields").css("display","none"); 
                    $("#parent_fields").css("display","block"); 
                }
                else if(type == 'child'){
                    $("#parent_fields").css("display","none");
                    $("#child_fields").css("display","block"); 
                }
                else{
                    $("#parent_fields").css("display","none"); 
                    $("#child_fields").css("display","none"); 
                }
            });
            
            var id = 2;
            $('#addLevel').click(function(){
                var html = '<div class="report_row"><h4>Level ' + id + ' name</h4><input type="text" name="level' + id + '"' + 'id="level' + id + '"' + ' required="required"/></div>';
                $(html).appendTo('#index_levels');
                id++;
                $("#removeLevel").css("display","inline");
            });
            
            
            $('#removeLevel').click(function(){
                id--;
                $("#index_levels div:last-child").remove();
                
                if(id == 2)
                    $("#removeLevel").css("display","none"); 
            });
            
            $("form").submit(function(){
                $('input[name="number_of_levels"]').val(id-1);
                return true;
            });
        });
    </script>
{% endblock %}